<template>
  <div id="app">
    <div class="app-root-content">

      <Head></Head>
      <div id="root-app-view" class="root-app-view">
        <router-view />
      </div>
      <RemotePanel></RemotePanel>
      <VideoPanel></VideoPanel>
    </div>
  </div>
</template>

<script>
import Head from "~/base/Head.vue";
import RemotePanel from "~/remote/RemotePanel.vue";
import VideoPanel from "~/appviews/VideoPanel.vue";

export default {
  components: {
    Head,
    RemotePanel,
    VideoPanel,
  },
  methods: {
    makeHeight() {
      return `${this.config.height - 65}px`;
    },
  },
  mounted() {
    this.config.height = document.body.clientHeight;
    this.utils.refreshRootContentHeight();
  },
};
</script>

<style>
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  background-color: #f0f2f5;
  overflow: hidden;
}

#app {
  font-family: Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}

#app .pp-root-content {
  width: 100%;
  height: 100%;
}

.el-scrollbar__thumb {
  background: #6dacec !important;
}

.noselect {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}

#app .root-app-view {
  position: relative;
  width: 100%;
}

.divline {
  display: inline-block;
}

.yj {
  border-radius: 15px;
}

.root-content {
  margin-left: 5px;
  margin-right: 5px;
  min-width: 1200px;
}

.el-dialog__body {
  padding: 0px 20px;
}

.divdd {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.divlist-item-2em {
  line-height: 2em;
}
</style>
